<template>
  <div>
    <el-button type="primary" :loading="userDataLoading"
      >用户的实时数量：{{ userNum }}</el-button
    >
    <el-button type="primary" :loading="productDataLoading"
      >商品的实时数量：{{ productNum }}</el-button
    >
  </div>

  <el-row>
    <el-col :span="24">
      <div id="main"></div>
    </el-col>
    <el-col :span="24">
      <div id="main2"></div>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { productTongjiRequest } from "@/api/login";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { Kxian, tubiao } from "@/api/tubiao";
import { log } from "echarts/types/src/util/log.js";
// import { log } from "echarts/types/src/util/log.js";

const userNum = ref(0);
const userDataLoading = ref(false);
const productNum = ref(0);
const productDataLoading = ref(false);

productDataLoading.value = true;

setTimeout(() => {
  productTongjiRequest().then((r) => {
    productDataLoading.value = false;
    // console.log(r.data);
    productNum.value = r.data.data;
  });
}, 1000);

onMounted(async function () {
  const r = await Kxian();
  console.log(r.data);

  //k线图的请求

  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById("main"));
  // 绘制图表
  myChart.setOption({
    title: {
      text: "K线图",
    },
    tooltip: {},
    xAxis: {
      data: r.data.data.x,
    },
    yAxis: {},
    series: [
      {
        type: "candlestick",
        data: r.data.data.val,
      },
    ],
  });
});

onMounted(async function () {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById("main2"));
  // 调用接口--获取图标数据--调用setOpton
  // 绘制图表
  let r = await tubiao();
  console.log(r.data);
  const arrx = r.data.data.map((v) => v.x); // 返回 v.x
  const arry = r.data.data.map((v) => v.val); // 返回 v.val
  const option = {
    xAxis: {
      type: "category",
      data: arrx,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: arry,
        type: "line",
      },
    ],
  };
  myChart.setOption(option);
});
</script>

<style scoped>
#main {
  width: 100%;
  height: 800px;
}
#main2 {
  width: 100%;
  height: 800px;
}
</style>
